<template>
	<view>
		<view class="title">
			<text class="iconfont">&#xe61a;</text>学生信息
		</view>
		<view class="no-content" v-if="studentInfo.length === 0 || studentInfo==null">
			<text>已将到底了</text>
		</view>
		<view v-for="(item, index) in studentInfo" :key="index">
			<uni-collapse ref="add" class="warp">
				<uni-collapse-item :show-animation="true" :title="item.name">
					<view class="content" v-if="item.id!==undefined && item.id!==''">
						<text class="iconfont" style="color: #e64340;">&#xe605;</text>学号：{{item.id}}
					</view>
					<view class="content" v-if="item.name!==undefined && item.name!==''">
						<text class="iconfont" style="color: #7099e6;">&#xe62f;</text>姓名：{{item.name}}
					</view>
					<view class="content" v-if="item.sex!==undefined && item.sex!==''">
						<text class="iconfont" style="color: #3fe6a9;">&#xe705;</text>性别：{{item.sex}}
					</view>
					<view class="content" v-if="item.born!==undefined && item.born!==''">
						<text class="iconfont" style="color: #e6069f;">&#xe62a;</text>出生年月：{{item.born}}
					</view>
					<view class="content" v-if="item.addr!==undefined && item.addr!==''">
						<text class="iconfont" style="color: #e3e631;">&#xe640;</text>住址：{{item.addr}}
					</view>
					<view class="content" v-if="item.tel!==undefined && item.tel!==''">
						<text class="iconfont" style="color: #0ae63e;">&#xe66f;</text>电话：{{item.tel}}
					</view>
				</uni-collapse-item>
			</uni-collapse>
		</view>
	</view>
</template>

<script>
	import {
		getList,
		// getInfo
	} from '@/api/tStuAndTea.js'
	import {
		uniCollapse,
		uniCollapseItem
	} from '@dcloudio/uni-ui'
	export default {
		components: {
			uniCollapse,
			uniCollapseItem
		},
		data() {
			return {
				studentInfo: [/*{
					id:"学号",
					name:"姓名",
					born:'2020-02-02',
					sex:"男",
					email:'123@456.com',
					addr:'China',
					tel:'15012345678'
				}*/]
			}
		},
		methods: {
			getData() {
				uni.showLoading()
				getList({
					teaId: getApp().globalData.tid
				}).then(res => {
					// console.log(res)
					this.studentInfo=res.data.data
					uni.hideLoading()
				})
			}
		},
		onLoad() {
			this.getData()
		}
	}
</script>

<style>
	page{
		font-family: 'Courier New', Courier, monospace;
	}
	.iconfont {
		font-family: "iconfont" !important;
		font-size: 20px;
		font-style: normal;
		-webkit-font-smoothing: antialiased;
		-moz-osx-font-smoothing: grayscale;
		margin-right: 5px;
	}
	.title {
		color: #FFFFFF;
		height: 50px;
		padding: 10px;
		font-size: 18px;
		box-sizing: border-box;
		background-color: #ffaa00;
	}

	.title::after {
		content: "";
		position: absolute;
		right: 0;
		top: 0;
		border-right: 50px solid white;
		border-left: 50px solid transparent;
		border-bottom: 50px solid transparent;
	}

	.no-content {
		display: flex;
		height: auto;
		padding: 10px;
		font-size: 14px;
		justify-content: center;
		align-items: center;
		background-color: #f7f7f7;
	}

	.content {
		padding: 15px;
		font-size: 18px;
		line-height: 20px;
		background-color: #fbfbfb;
		color: #666;
		border-bottom: 1px dotted #c8c7cc;
		margin: 0 5px 10px 5px ;
		box-shadow: 5px 5px 3px #d3cfb0;
		border-radius: 5px;
	}

</style>
